<template>
  <div class="app-container">
    <!-- 查询 -->
    <tl-list-search ref="search" :query-param="queryParam" @search="doQuery" :isDisplayDefaultSearch="false" v-if="isHeaderDisplay">
      <template slot="search">
        <el-form-item label="起止日期" prop="date">
          <el-date-picker v-model="startandenddate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changedate"></el-date-picker>
        </el-form-item>
      </template>
    </tl-list-search>
    <!-- 工具栏 -->
    <tl-list-toolbar ref="toolbar" @add="openAddDialog('editForm')" @exportExcel="doExportExcel" @deleteBatch="doDeleteBatch" @refresh="doRefresh" @columnCustomize="doColumnCustomize" @displaySearch="doDisplaySearch" :disableDeleteBatch="selectedRowKeys.length <= 0" :isDisplayAdd="false" :isDisplayDeleteBatch="false">
      <template slot="left-btn"> </template>
    </tl-list-toolbar>
    <!--表格渲染-->
    <el-table class="tl-table" ref="mainTable" :height="tableHeight" resizable-key="tableHeight" :resizable-refs="tableResizeRefs" v-loading="loading" :data="datas" @selection-change="doSelectChange" @sort-change="doSortChange" row-key="id" border fit :row-class-name="doChangeRowClassName">
      <el-table-column type="index" label="序号" width="55px" align="center"></el-table-column>
      <el-table-column prop="dispdeptcommoncode" label="省份" width="100px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="projectall" label="项目数" width="80px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="项目超期">
        <el-table-column prop="overdueprojecttime" label="累计超期时长(天)" width="140px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="averageoverdueprojecttime" label="平均超期时长(天)" width="140px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="overdueprojectnum" label="累计超期次数" width="120px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="averageoverdueprojectnum" label="平均超期次数" width="120px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      </el-table-column>
      <el-table-column prop="milepostall" label="里程碑及任务数" width="80px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="里程碑及任务超期">
        <el-table-column prop="overduemileposttime" label="累计超期时长(天)" width="140px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="averageoverduemileposttime" label="平均超期时长(天)" width="140px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="overduemilepostnum" label="累计超期次数" min-width="120px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="averageoverduemilepostnum" label="平均超期次数" min-width="120px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      </el-table-column>
      <el-table-column prop="taskall" label="任务数" width="80px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="任务超期">
        <el-table-column prop="overduetasktime" label="累计超期时长(天)" width="140px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="averageoverduetasktime" label="平均超期时长(天)" width="140px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="overduetasknum" label="累计超期次数" min-width="120px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="averageoverduetasknum" label="平均超期次数" min-width="120px" align="center" header-align="center" :show-overflow-tooltip="true"></el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
import { validateNull } from '@tapui/utils/validate'
import { exportExcelAxio } from '@tapui/api/office'
/** 子组件 */
import tlEdit from './edit'
/** 工具类 */
import { getAction, putAction, postAction, deleteAction } from '@tapui/utils/http'
const baseUrl = process.env.BASE_API
export default {
  name: 'mpmProjectOverdue',
  mixins: [mixin_list],
  components: { tlEdit },
  data() {
    return {
      description: '销售项目超期记录-列表查询',
      urlPrefix: '/mpm/projectOverdueRecord/',
      url: {
        list: '/mpm/projectOverdueRecord/loadOverDueSummary',
        exportExcel: '/mpm/projectOverdueRecord/overdueExportExcel'
        // queryCodeList: '/mpm/projectOverdueRecord/dataCodeList'
      },
      // 排序参数
      sorterInfo: {
        sidx: 'sortcode',
        sord: 'asc'
      },
      startandenddate: ''
    }
  },
  methods: {
    changedate(data) {
      if (validateNull(data)) {
        this.queryParam.startdate = null
        this.queryParam.enddate = null
      } else {
        this.queryParam.startdate = data[0]
        this.queryParam.enddate = data[1]
      }
    },
    /** 导出Excel*/
    doExportExcel() {
      if (!this.beforeExportData()) return
      let cols = []
      // 递归获取el-table的column
      this.dfsColumn(this.$refs.mainTable, cols)
      let url = baseUrl + `${this.url.exportExcel}`
      let data = {}
      Object.assign(data, this.getQueryParams(), { cols: cols.join(',') })
      exportExcelAxio({ url: url, data: data })
        .then((res) => {
          var reader = new FileReader()
          reader.readAsText(res.data, 'utf-8')
          reader.onload = () => {
            try {
              var info = JSON.parse(reader.result)
              this.$tap.alert(info.message)
            } catch (e) {
              var isTaskExport = res.headers.istaskexport
              if (isTaskExport === '1') {
                this.$tap.alert('系统正在导出，请到excel导出任务页面下载')
              } else {
                var blob = new Blob([res.data], { type: 'application/octet-stream;charset=utf-8' })
                var filename = decodeURI(res.headers['filename'])
                if (typeof filename === 'undefined') {
                  filename = '导出数据.xlsx'
                }
                var tempObjectUrl = window.URL.createObjectURL(blob)
                var aLink = document.createElement('a')
                aLink.style.display = 'none'
                aLink.download = filename
                aLink.href = tempObjectUrl
                document.body.appendChild(aLink)
                aLink.click()
                document.body.removeChild(aLink)
                window.URL.revokeObjectURL(tempObjectUrl)
                this.afterExportData()
              }
            }
          }
        })
        .catch((error) => {
          this.$tap.alert(error, 'warning')
        })
    },
    // 递归获取el-table的各个列名称
    dfsColumn(mainTable, cols) {
      if (mainTable.$options._componentTag === 'el-table-column') {
        if (mainTable.$options.propsData.prop) {
          cols.push(mainTable.$options.propsData.prop + ';' + mainTable.$options.propsData.label)
        }
      }
      if (validateNull(mainTable.$children)) {
        return
      } else {
        for (let i = 0; i < mainTable.$children.length; i++) {
          this.dfsColumn(mainTable.$children[i], cols)
        }
      }
    }
  }
}
</script>

<style scoped></style>
